<template>
  <div class="box-main">
    <div class="box-main-text">
      <p>家族工资</p>
      <p class="box-main-text-desc">你的专属家族福利</p>
    </div>
    <img class="box-main-icon2" src="@/assets/images/FamilySalary/icon2.png" alt="" />
    <div class="card m-b-5-13">
      <div class="card-content">
        <p class="card-content-label">预计本周可获得</p>
        <div class="card-content-value">
          <span>3000,00</span>
          <img class="card-content-value-icon3" src="@/assets/images/FamilySalary/icon3.png" alt="" />
        </div>
      </div>
      <div class="card-content">
        <p class="card-content-label">本周活跃</p>
        <div class="card-content-value font-6-15">98</div>
      </div>
    </div>

    <div class="box-title">
      <div class="flex-center">
        <img class="box-title-icon4" src="@/assets/images/FamilySalary/icon4.png" alt="" />
        <p class="box-title-name">我的职位</p>
      </div>
      <div class="flex-center">
        <img class="box-title-icon5" src="@/assets/images/FamilySalary/icon5.png" alt="" />
        <p class="box-title-text">族长</p>
      </div>
    </div>
    <div class="box-desc m-b-5-13">
      <p class="box-desc-tips">完成日常任务可获得工资与金额</p>
      <p class="box-desc-tips">家族等级越高，福利加成越高，当前已享加成40%</p>
      <p class="box-desc-tips">
        <span>完成日常任务可获得工资与金额</span>
        <img src="@/assets/images/FamilySalary/icon10.png" alt="" />
      </p>
    </div>
    <div class="flex-center">
      <img class="box-title-icon4" src="@/assets/images/FamilySalary/icon4.png" alt="" />
      <p class="box-title-name">福利计算规则</p>
    </div>
    <div class="table-wrapper m-b-5-13">
      <table>
        <thead>
          <tr>
            <th>家族职位</th>
            <th>每获得一点活跃度可以获得的基础工资</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="v in list" :key="v.label">
            <td>
              <div class="flex-middle-center">
                <img class="table-td-icon" :src="getImageUrl(v.img1)" alt="" />
                <span class="table-td-label" :style="{ color: v.color }">{{ v.label }}</span>
              </div>
            </td>
            <td>
              <div class="flex-middle-center">
                <span class="table-td-value">{{ v.value }}</span>
                <img class="table-td-icon11" :src="getImageUrl(v.img2)" alt="" />
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="flex-center">
      <img class="box-title-icon4" src="@/assets/images/FamilySalary/icon4.png" alt="" />
      <p class="box-title-name">福利领取条件</p>
    </div>
    <div class="box-desc m-b-5-13">
      <p class="box-desc-tips">在当前家族内，完成日常任务获得活跃度，下周可领取福利</p>
      <p class="box-desc-tips">退出家族将清空家族工资玩法的活跃数据</p>
    </div>
    <div class="flex-center">
      <img class="box-title-icon4" src="@/assets/images/FamilySalary/icon4.png" alt="" />
      <p class="box-title-name">家族等级加成</p>
    </div>
    <div class="table-wrapper">
      <table>
        <thead>
          <tr>
            <th>家族等级</th>
            <th>基础周福利加成</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="v in 5" :key="v">
            <td>
              <img class="table-td-img" src="@/assets/images/FamilySalary/icon6.png" alt="" />
            </td>
            <td>
              {{ `${v}00%` }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script setup>
const getImageUrl = (name) => {
  return new URL(`../../assets/images/FamilySalary/${name}`, import.meta.url).href
}
const list = [
  { label: '族长', value: '3000.00', img1: 'icon5.png', img2: 'icon11.png', color: '#602AFF' },
  { label: '副族长', value: '2000.00', img1: 'icon6.png', img2: 'icon11.png', color: '#D34CED' },
  { label: '长老', value: '1000.00', img1: 'icon7.png', img2: 'icon11.png', color: '#ED754C' },
  { label: '管理员', value: '500.00', img1: 'icon8.png', img2: 'icon11.png', color: '#FFB83B' },
  { label: '嘉宾', value: '250.00', img1: 'icon9.png', img2: 'icon11.png', color: '#E54D7E' },
]
</script>
<style lang="scss" scoped>
.box-main {
  background-image: url('@/assets/images/FamilySalary/icon1.png');
  background-size: 100% 51.79rem;
  background-repeat: no-repeat;
  position: relative;
  padding: 0 3.08rem;
  padding-bottom: 5.13rem;

  .table-wrapper {
    border-radius: 10px;
    overflow: hidden;
    background: #FFF;
    margin-top: 3.85rem;

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: #FFF;
    }

    th,
    td {
      padding: 3.59rem 3.08rem;
      border-bottom: 1px solid #EEE;
      border-right: 1px solid #EEE;
      text-align: center;
    }

    th:first-child,
    td:first-child {
      border-left: 1px solid #EEE;
    }

    th {
      border-top: 1px solid #EEEE;
      background: #FFF;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 3.59rem;
      color: #666666;
      line-height: 5.13rem;
    }

    td {
      font-family: Roboto, Roboto;
      font-weight: 500;
      font-size: 3.59rem;
      color: #3D3D3D;
      line-height: 4.1rem;

      .table-td-icon {
        width: 4.1rem;
        height: 4.1rem;
        display: block;
      }

      .table-td-label {
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        font-size: 3.08rem;
        color: #602AFF;
        line-height: 4.36rem;
        margin-left: 0.51rem;
      }

      .table-td-value {
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 3.59rem;
        color: #3D3D3D;
        line-height: 4.1rem;
      }

      .table-td-icon11 {
        width: 3.59rem;
        height: 3.59rem;
        display: block;
        margin-left: 1.03rem;
      }

      .table-td-img {
        width: 11.54rem;
        height: 4.62rem;
      }
    }

    th:first-child {
      border-top-left-radius: 10px;
    }

    th:last-child {
      border-top-right-radius: 10px;
    }

    tr:last-child td:first-child {
      border-bottom-left-radius: 10px;
    }

    tr:last-child td:last-child {
      border-bottom-right-radius: 10px;
    }
  }



  .box-desc {
    margin-top: 3.08rem;
    padding-left: 5.64rem;

    &-tips {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 3.59rem;
      color: #999999;
      line-height: 5.13rem;
      margin-bottom: 2.05rem;
      padding-left: 3rem;
      display: flex;
      align-items: center;
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      img {
        width: 3.08rem;
        height: 3.08rem;
        margin-left: 1.03rem;
        display: block;
      }

      &::before {
        content: '';
        width: 1.54rem;
        height: 1.54rem;
        border-radius: 50%;
        background: #F079B3;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }

  .flex-center {
    display: flex;
    align-items: center;
  }

  .flex-middle-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-icon4 {
      width: 4.62rem;
      height: 4.62rem;
      display: block;
    }

    &-icon5 {
      width: 4.1rem;
      height: 4.1rem;
      display: block;
    }

    &-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 3.08rem;
      color: #3D3D3D;
      line-height: 4.36rem;
      margin-left: 1.03rem;
    }

    &-name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 4.1rem;
      color: #3D3D3D;
      margin-left: 1.54rem;
      line-height: 5.64rem;
    }
  }


  .m-b-5-13 {
    margin-bottom: 5.13rem;
  }

  &-text {
    display: flex;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 4.62rem;
    color: #FFFFFF;
    line-height: 6.41rem;
    padding: 23.59rem 0 4.36rem 2.05rem;

    &-desc {
      font-size: 3.08rem;
      line-height: 4.36rem;
      margin-left: 1.54rem;
    }
  }

  &-icon2 {
    width: 34.1rem;
    height: 37.44rem;
    display: block;
    position: absolute;
    top: 11.28rem;
    right: 5.13rem;
    z-index: 1;
  }

  .card {
    background: #FFFFFF;
    border-radius: 2.56rem;
    padding: 5.64rem 7.69rem 6.67rem;
    position: relative;
    z-index: 10;
    display: flex;
    gap: 0 15.38rem;

    &-content {
      &-label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 3.59rem;
        color: #3D3D3D;
        line-height: 5.13rem;
      }

      &-value {
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 7.18rem;
        color: #3D3D3D;
        line-height: 8.46rem;
        margin-top: 1.03rem;
        display: flex;
        align-items: center;

        &-icon3 {
          width: 6.15rem;
          height: 6.15rem;
          display: block;
          margin-left: 1.03rem;
        }
      }

      .font-6-15 {
        font-size: 6.15rem;
        line-height: 7.18rem;
      }
    }
  }
}
</style>